<template>
    <div class="view">
        <android-nav-bar title="红娘牵线" v-on:back="back"></android-nav-bar>
        <div class="none-record" v-if="!recordList.length">暂无牵线记录!</div>
        <cube-scroll class="scroll" v-else ref="scroll" :scroll-events="['scroll']"
                     :data="recordList"
                     :options="options"
                     @pulling-down="onPullingDown"
                     @pulling-up="onPullingUp">
            <ul class="list-wrapper">
                <li v-for="(item, index) in recordList" class="list-item flex" :key="index">
                    <div class="active" @click="toPage('singleInfo',{friendId:item.active.user_id})">
                        <img :src="item.active.avatar&&item.active.avatar.file_status.status?item.active.avatar.file_path+'?imageView2/0/w/80':filePath" class="active-avatar">
                        <div class="nickname ellipsis">{{item.active.nickName}}</div>
                    </div>
                    <div class="link">
                        <span class="line"></span>
                        <span class="iconfont icon-youbian"></span>
                        <svg class="svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-xinjian"></use>
                        </svg>
                    </div>
                    <div class="passive" @click="toPage('singleInfo',{friendId:item.passive.user_id})">
                        <img :src="item.passive.avatar&&item.passive.avatar.file_status.status?item.passive.avatar.file_path+'?imageView2/0/w/80':filePath" class="passive-avatar">
                        <div class="nickname ellipsis">{{item.passive.nickName}}</div>
                    </div>
                </li>
            </ul>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch, Inject} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import HeadImg from "@/components/HeadImg.vue";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            HeadImg,
            AndroidNavBar
        }
    })
    export default class MatchRecord extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require("@/assets/images/user-no-face.jpg");
        @State("UserStore")
        public user!: InterfaceUser;
        private recordList: any[] = [];
        private page: number = 1;

        private get options(): any {
            return {
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private get self(): any {
            return {
                sex: this.user.gender,
                headImg: this.user.avatar ? this.user.avatar.filePath : "",
            };
        }

        private onPullingDown(): void {
            (this as any).$refs.scroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getMatchServiceList, {page: this.page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.recordList = this.recordList.concat(res.data.data);
                        this.page++;
                        this.$nextTick(() => {
                            (this as any).$refs.scroll.refresh();
                            (this as any).$refs.scroll.forceUpdate();
                        });
                    } else if (res.data.data == []) {
                        (this as any).$refs.scroll.forceUpdate();
                    }
                } else {
                    this.globalSingleResultToast(res);
                }
            });
        }

        private getMatchRecordList(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getMatchServiceList, {page: this.page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    console.log(res);
                    loadToast.hide();
                    this.recordList = res.data.data;
                    this.page++;
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                console.log(res);
                loadToast.hide();
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }


        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {
            this.getMatchRecordList();
        }
    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden
        background $theme-page-common-background-color;

        .none-record
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            padding-top 200px;
            text-align center;

        .scroll
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            background-color #fff;

            .list-wrapper
                .list-item
                    margin 0px 7px;
                    padding 10px 0;
                    justify-content: space-around;
                    align-items center;
                    border-bottom 1px solid $theme-line-color;

                    > div
                        width 100px;
                        text-align center;

                        .nickname
                            width 100px;
                            margin-top 5px;

                        img
                            width 70px;
                            height 70px;
                            border-radius 50%;

                    .link
                        width 150px;
                        position relative;

                        .line
                            display inline-block;
                            width 130px;
                            height 1px;
                            border-top 2px solid $theme-common-color;
                            margin-bottom 5px;
                            margin-right -10px;

                        .iconfont
                            color $theme-common-color;

                        .svg-icon
                            position absolute;
                            font-size 35px;
                            left calc(50% - 15px);
                            top calc(50% - 20px);


</style>
